<template>
  <div class='container'>
    <!-- 表单 -->
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-form-item label="文章标题:" prop="title">
      <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
    </el-form-item>
    <el-form-item label="文章内容:" prop="articleBody">
    <!-- 富文本组件 -->
    <quill-editor @blur="checkContent"  v-model="form.articleBody" :options="editorOption"/>
    </el-form-item>
     <el-form-item label="视频地址:">
      <el-input v-model="form.videoURL" placeholder="请输入视频地址"></el-input>
    </el-form-item>
    <el-form-item style="text-align:right">
    <el-button @click="cancelAdd">取消</el-button>
    <el-button type="primary" @click="addOrEdit">确认</el-button>
  </el-form-item>
  </el-form>

  </div>
</template>

<script>
// 导入富文本样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入富文本组件
import { quillEditor } from 'vue-quill-editor'
// 导入api
import { add, detail, update } from '@/api/hmmm/articles'
export default {
  name: 'ArticlesAdd',
  components: {
    quillEditor
  },
  props: {
    // 当前编辑项
    article: {
      type: Object,
      default: () => ({})
    },
    // 当前状态(添加还是编辑)
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: {
        title: '', // 文章标题
        articleBody: '', // 文章内容
        videoURL: '' // 视频地址
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      // 富文本配置项
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'bullet' }, { list: 'ordered' }],
            ['blockquote', 'code-block', 'image', 'link']
          ]
        },
        placeholder: ''
      }
    }
  },
  created () {
    // 如果是编辑
    if (this.isEdit) {
      // 发送请求 数据回填
      this.detail()
    }
  },
  methods: {
    // 通过id获取文章进行回填
    async detail () {
      const res = await detail(this.article)
      // console.log(res)
      this.form = res.data
    },

    // 重置表单及数据
    resetForm () {
      // 重置表单
      this.$refs.form.resetFields()
      // 重置数据
      this.form = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
    },

    // 确定编辑 保存修改
    async editSubmit () {
      await update(this.form)
      // console.log(res)
      // 提示
      this.$message.success('修改文章成功')
      // 关闭弹框
      // 刷新页面
      this.$emit('update')
    },

    // 确认添加
    async addSubmit () {
      await add(this.form)
      // console.log(res)
      // 提示
      this.$message.success('新增文章成功')
      // 关闭弹框
      // 刷新页面
      this.$emit('update')
    },

    // 点击确认按钮
    addOrEdit () {
      // 兜底校验
      this.$refs.form.validate(async valid => {
        if (!valid) return
        // 判断编辑还是添加
        this.isEdit ? this.editSubmit() : this.addSubmit()
      })
    },

    // 富文本内容校验
    // 监听富文本组件的blur事件
    checkContent () {
      // 手动调用element组件的方法校验 articleBody字段
      this.$refs.form.validateField('articleBody')
    },

    // 点击取消按钮
    cancelAdd () {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .ql-editor {
  min-height: 200px;
}
</style>
